<html>
<head>
<title>Cellular Automata</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="ca.css" type="text/css" media="screen" /> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="ca.js"></script> 
<script type="text/javascript"><!--

var Rule = akinao.ca.Rule;
var CA = akinao.ca.CellAutomata;
var Color = akinao.ca.Color;

var rules = [];
(function() {
	var r = {
		"Banners": "3457/2367,5",
		"BelZhab": "23/23,8",
		"BelZhab Sediment": "23/145678,8",
		"Bloomerang": "34678/234,24",
		"Bombers": "24/345,25",
		"Brain 6": "246/6,3",
		"Brain's Brain": "2/,3",
		"Burst": "3468/0235678,9",
		"Burst II": "3468/235678,9",
		"Caterpillars": "37/124567,4",
		"Chenille": "24567/05678,6",
		"Circuit Genesis": "1234/2345,8",
		"Cooties": "2/23,8",
		"Ebb&Flow": "36/012478,18",
		"Ebb&Flow II": "37/0123468,18",
		"Faders": "2/2,25",
		"Fireworks": "13/2,21",
		"Flaming Starbows": "23/347,8",
		"Frogs": "34/12,3",
		"Frozen spirals": "23/356,6",
		"Glisserati": "245678/035678,7",
		"Glissergy": "245678/035678,5",
		"Lava": "45678/12345,8",
		"Lines": "458/012345,3",
		"LivingOn TheEdge": "3/345,6",
		"Meteor Guns": "3/01245678,8",
		"Nova": "2478/45678,25",
		"OrthoGo": "2/3,4",
		"Prairie on fire": "34/345,6",
		"RainZha": "23/2,8",
		"Rake": "2678/3467,6",
		"SediMental": "25678/45678,4",
		"Snake": "25/03467,6",
		"SoftFreeze": "38/13458,6",
		"Spirals": "234/2,5",
		"Star Wars": "2/345,4",
		"Sticks": "2/3456,6",
		"Swirl": "34/23,8",
		"ThrillGrill": "34/1234,48",
		"Transers": "26/345,5",
		"TransersII": "26/0345,6",
		"Wanderers": "34678/345,5",
		"Worms": "25/3467,6",
		"Xtasy": "2356/1456,16",
		"Transit": "2678/45678,6",
		"Mineral": "3456/45678,16",
		"Frost crystals": "25678/34678,40",
		"2x2": "36/125",
		"34 Life": "34/34",
		"Amoeba": "357/1358",
		"Assimilation": "345/4567",
		"Coagulations": "378/235678",
		"Conway's Life": "3/23",
		"Coral": "3/45678",
		"Day & Night": "3678/34678",
		"Diamoeba": "35678/5678",
		"Flakes": "3/012345678",
		"Gnarl": "1/1",
		"HighLife": "36/23",
		"InverseLife": "0123478/23678",
		"Long life": "345/5",
		"Maze": "3/12345",
		"Mazectric": "3/1234",
		"Move": "368/245",
		"Pseudo life": "357/238",
		"Replicator": "1357/1357",
		"Seeds (2)": "2/",
		"Seriettes": "234/",
		"Stains": "3678/235678",
		"WalledCities": "45678/2345",
	};
	var i = 0;
	for (var n in r) {
		rules[i++] = Rule.generations(n, r[n]);
	}
})();

var colors = {
	panton: new Color.RepeatedColor([
		"black",
		"orange",
		"tomato",
		"red",
		"crimson",
		"purple",
		"indigo",
		"navy",
		"blue",
		"darkgreen",
	]),
	ringLamp: new Color.RepeatedColor([
		"black",
		"floralwhite",
		"red",
		"coral",
		"maroon",
		"gold",
		"crimson",
	]),
	monotone: new Color.RepeatedColor([
		"whitesmoke",
		"gray",
		"gainsboro",
		"darkgray",
		"lightgray",
		"dimgray",
	]),
	gradation: new Color.GradationalColor(
		0xf0f0f0,
		0x606060,
		0xffffff
	),
/*
	eightsumMono: new Color.EightSumColor([
   		"#f0f0f0", // background
		"#ffffff", // 0
		"#f8f8f8", // 1
		"#e0e0e0", // 2
		"#c0c0c0", // 3
		"#b0b0b0", // 4
		"#909090", // 5
		"#707070", // 6
		"#505050", // 7
		"#303030", // 8
	]),
	eightsum: new Color.EightSumColor([
		"whitesmoke", // background
		"moccasin", // 0
		"skyblue", // 1
		"mediumblue", // 2
		"green", // 3
		"crimson", // 4
		"gold", // 5
		"purple", // 6
		"navy", // 7
		"gray", // 8
	]),
*/
	eightsum: new Color.EightFourSumColor([
		"whitesmoke", // background
		"moccasin", // 0a
		"skyblue", // 1a
		"deepskyblue", // 1b
		"blue", // 2a
		"mediumblue", // 2b
		"dodgerblue", // 2c
		"green", // 3a
		"darkgreen", // 3b
		"forestgreen", // 3c
		"limegreen", // 3d
		"coral", // 4a
		"orangered", // 4b
		"red", // 4c
		"crimson", // 4d
		"maroon", // 4e
		"yellow", // 5b
		"gold", // 5c
		"orange", // 5d
		"darkorange", // 5e
		"purple", // 6c
		"indigo", // 6d
		"magenta", // 6e
		"darkcyan", // 7d
		"darkslategray", // 7e
		"gray", // 8e
	]),
	eightsumMono: new Color.EightFourSumColor([
		"#f8f8f8", // background
		"#707070", // 0a
		"#808080", // 1a
		"#888888", // 1b
		"#909090", // 2a
		"#969696", // 2b
		"#9b9b9b", // 2c
		"#a0a0a0", // 3a
		"#a4a4a4", // 3b
		"#a8a8a8", // 3c
		"#acacac", // 3d
		"#b0b0b0", // 4a
		"#b3b3b3", // 4b
		"#b6b6b6", // 4c
		"#b9b9b9", // 4d
		"#bbbbbb", // 4e
		"#c0c0c0", // 5b
		"#c4c4c4", // 5c
		"#c8c8c8", // 5d
		"#cccccc", // 5e
		"#d0d0d0", // 6c
		"#d6d6d6", // 6d
		"#dbdbdb", // 6e
		"#e0e0e0", // 7d
		"#e8e8e8", // 7e
		"#f0f0f0", // 8e
	]),
};

var rule = null;
var color = colors.gradation;
var universeClosed = true;
var random = 0.3;

function setInit(n) {
	random = n;
	setCa();	
}

function setUniverse(v) {
	universeClosed = v;
	setCa();
}

function setColor(name) {
	color = colors[name];
	setCa();
}

function setRule(n) {
	rule = rules[n];
	$('#rule').val(rule.code);
	setCa();
}

var ca = null;
function setCa() {
	ca = new CA({
		element: document.getElementById("ca"),
		universe: {x: 160, y: 100, closed: universeClosed},
		rule: rule, 
		color: color,
		pix: 4,
	});
	$('#rule_name').text(rule.name);
	$('#rule_code').text(rule.code);
	ca.next(Rule.random(random));
}

function next() {
	ca.next();
	setTimeout(next, 10);
}

$(window).load(function () {
	$('#formRule').submit(function() {
		var r = document.getElementById("rule").value;
		rule = Rule.generations("Original", r);
		setCa();
		return false;
	});
	setRule(35);
	next();	
});

--></script>
</head>
<body>
<div id="container">
<div id="header">
<span style="font-size: 20pt;">Cellular Automata</span>
</div>
<div id="contents">
<canvas id="ca" style="cursor: pointer;" onclick="setCa();"></canvas><br />
Rule: <span id="rule_name"></span> "<span id="rule_code"></span>"<br/>
Color:
<a href="javascript:setColor('panton');">Panton</a>
<a href="javascript:setColor('ringLamp');">RingLamp</a>
<a href="javascript:setColor('monotone');">Monotone</a>
<a href="javascript:setColor('gradation');">Gradation</a>
<a href="javascript:setColor('eightsum');">ColorBlock</a>
<a href="javascript:setColor('eightsumMono');">MonoBlock</a>
<br/>
Universe:
<a href="javascript:setUniverse(true);">Closed</a>
<a href="javascript:setUniverse(false);">Opened</a>
Init:
<a href="javascript:setInit(0.1);">10</a>
<a href="javascript:setInit(0.2);">20</a>
<a href="javascript:setInit(0.3);">30</a>
<a href="javascript:setInit(0.4);">40</a>
<a href="javascript:setInit(0.5);">50</a>
<a href="javascript:setInit(0.6);">60</a>
<a href="javascript:setInit(0.7);">70</a>
<a href="javascript:setInit(0.8);">80</a>
<a href="javascript:setInit(0.9);">90</a>
<br/>
<form id="formRule">
Edit Rule: <input id="rule" type="text" size="20"/>
<input type="submit" value="set"/>
</form>
</div>

<div id="navigation">
<script type="text/javascript">
	document.write("<ul>");
	for (var i in rules) {
		document.write("<li><a style='white-space: nowrap;' href='javascript:setRule(" + i + ");'>" + rules[i].name + "</a></li>");
	}
	document.write("</ul>");
</script>
</div>

<div id="footer">
</div>

</div>

</body>
</html>